@require './config'

$mobileSidebarWidth = $sidebarWidth * 0.82

// narrow desktop / iPad
@media (max-width $MQNarrow)
  .sidebar
    font-size 15px
    width $mobileSidebarWidth

  .page
    padding-left $mobileSidebarWidth

// wide mobile
@media (max-width $MQMobile)
  .sidebar
    top 0
    padding-top $navbarHeight
    transform translateX(-100%)
    transition transform 0.2s ease

    &::-webkit-scrollbar
      width 6px !important
      height 6px !important

    &::-webkit-scrollbar-thumb
      background-color #EEE !important

  .page
    padding-left 0

  .theme-container
    &.sidebar-open
      .sidebar
        transform translateX(0)

    &.no-navbar
      .sidebar
        padding-top 0

// narrow mobile
@media (max-width $MQMobileNarrow)
  h1
    font-size 1.9rem

  {$contentClass}
    div[class*='language-']
      margin 0.85rem -1.5rem
      border-radius 0
